import React, { } from 'react'
import { UdModal, UdPageHeader } from '@/lib'
import { Table, Steps, Button } from 'antd'


//接口字段映射
const fieldMap = {
  //订单编号
  orderId: "orderId",
  //订单类型
  orderType: "orderType",
  //订单状态
  orderStatus: "orderStatus",
  //审批状态
  approvalStatus: "approvalStatus",
  //送达方
  sendTo: "sendTo",
  //下单时间
  time: "time",
  //数量
  number: "number",
  //应付金额
  amountsPayable: "amountsPayable",
  //销售金额
  salesAmount: "salesAmount",
  //详情 - 交货单号
  detailsOrderNumber: "deliveryNumber",
  //详情 - 数量
  detailsNumber: "detailsNumber",
  //详情 - 发货日期
  detailsDate: "detailsDate",
  //详情 - 物流编号
  detailsLogisticsNumber: "detailsLogisticsNumber",
  //详情 - 是否签收
  detailsIsReceipt: "detailsIsReceipt",
  //详情 - 备注
  detailsRemark: "detailsRemark",

  //明细 - 商品名称
  modalDetailsName: "modalDetailsName",
  //明细 - 商品数量
  modalDetailsNumber: "modalDetailsNumber",
  //明细 - 计量单位
  modalDetailsUnit: "modalDetailsUnit",

  //审批状态 未进入
  noOn: 1,
  //审批状态 流程中
  onLine: 2,
  //审批状态 被终止
  haveEnd: 3,
  //审批状态 已完成
  done: 4,

  //详情 - 是否签收 - 未签收
  noReceipt: 1,
  //详情 - 是否签收 - 已签收
  haveReceipt: 2,

  //下拉框传递值
  value: "value",
  //下拉框显示值
  name: "name",
}


const DetailsTable = (props) => {

  console.log(props)

  //交货单明细
  const handleOrderDetails = (id) => {
    UdModal.open({
      width: "600px",
      title: "交货单明细",
      content: <>
        <ul style={{ listStyle: "none", paddingInlineStart: "5px" }}>
          <li style={{ padding: "5px 0px" }}><span>交货单号：</span><span>{}000000001</span></li>
          <li style={{ padding: "5px 0px" }}><span>商品数量：</span><span>{}30件</span></li>
          <li style={{ padding: "5px 0px" }}><span>发货日期：</span><span>{}2019-08-01</span></li>
          <li><span>物流编号：</span><span>{}000000022</span><Button type="link" onClick={() => { handleLogistics(id) }}>物流详情＞</Button></li>
        </ul>
        <Table
          rowKey={(record, index) => index + ""}
          dataSource={[
            {
              modalDetailsName: "modalDetailsName",
              modalDetailsNumber: "modalDetailsNumber",
              modalDetailsUnit: "modalDetailsUnit"
            },
            {
              modalDetailsName: "modalDetailsName",
              modalDetailsNumber: "modalDetailsNumber",
              modalDetailsUnit: "modalDetailsUnit"
            },
            {
              modalDetailsName: "modalDetailsName",
              modalDetailsNumber: "modalDetailsNumber",
              modalDetailsUnit: "modalDetailsUnit"
            },
          ]}
          columns={[
            {
              dataIndex: "sort",
              title: "序号",
              render: (text, record, index) => index + 1
            },
            {
              dataIndex: fieldMap.modalDetailsName,
              title: "商品名称"
            },
            {
              dataIndex: fieldMap.modalDetailsNumber,
              title: "商品数量"
            },
            {
              dataIndex: fieldMap.modalDetailsUnit,
              title: "计量单位"
            }
          ]}
          pagination={false}
        />
      </>,
      okText: "一键入库",
      cancelText: "关闭",
      onOk: () => {

      }
    })
  }

  //物流跟踪
  const handleLogistics = (id) => {

    const data = [
      {
        titlt: "物流详情1",
        description: "2016-09-25 09:50:08"
      },
      {
        titlt: "物流详情1",
        description: "2016-09-25 09:50:08"
      },
      {
        titlt: "物流详情1",
        description: "2016-09-25 09:50:08"
      },
      {
        titlt: "物流详情1",
        description: "2016-09-25 09:50:08"
      }
    ]

    UdModal.open({
      title: "物流跟踪",
      content: <>
        <div style={{ fontSize: "16px", paddingBottom: "10px" }}><span>物流公司：</span>{}中通快递</div>
        <div style={{ fontSize: "16px", paddingBottom: "15px" }}><span>物流编号：</span>{}2222222222222222</div>
        <Steps progressDot current={0} direction="vertical">
          {
            data.map((item, index) => <Steps.Step title={item.titlt} description={item.description} key={index} />)
          }
        </Steps>
      </>,
      footer: null
    })
  }

  //货物签收
  const handleReceipt = (id) => {

  }

  return <>
    <UdPageHeader title="交货单" onBack />
    <Table
      rowKey={(record, index) => index + ""}
      dataSource={[
        {
          detailsRemark: "dfs",
          detailsIsReceipt: 1
        },
        {
          detailsIsReceipt: 2
        }
      ]}
      columns={[
        {
          dataIndex: "sort",
          title: "序号",
          render: (text, record, index) => index + 1
        },
        {
          dataIndex: fieldMap.detailsOrderNumber,
          title: "交货单号"
        },
        {
          dataIndex: fieldMap.detailsNumber,
          title: "数量"
        },
        {
          dataIndex: fieldMap.detailsDate,
          title: "发货日期"
        },
        {
          dataIndex: fieldMap.detailsLogisticsNumber,
          title: "物流编号"
        },
        {
          dataIndex: fieldMap.detailsIsReceipt,
          title: "是否签收",
          render: (text, record, index) => text === fieldMap.noReceipt ? "未签收" : text === fieldMap.haveReceipt ? "已签收" : ""
        },
        {
          dataIndex: fieldMap.detailsRemark,
          title: "备注",
          render: (text, record, index) => record[fieldMap.detailsRemark] ? text : "/"
        },
        {
          dataIndex: "dos",
          title: "操作",
          render: (text, record: any, index) => <>
            <Button type="link" onClick={() => { handleOrderDetails(record.id) }}>交货单明细</Button>
            <Button type="link" onClick={() => { handleLogistics(record.id) }}>物流跟踪</Button>
            {
              record[fieldMap.detailsIsReceipt] === fieldMap.noReceipt &&
              <Button type="link" onClick={() => { handleReceipt(record.id) }}>货物签收</Button>
            }
          </>
        }
      ]}
      pagination={false}
    /></>
}

export default DetailsTable